<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        //    1. eval ，特点同步执行，作用域是当前执行代码的作用域
        //    2. setTimeout ，特点异步执行，作用域是全局作用域
        //    3. 动态创建script标签，特点同步执行，作用域是全局作用域
        //    4. Function ,同步，全局

        let a = 10
        function execCode(code) {
            let a = 20
            eval(code);
        }
        function execCode2(code) {
            let a = 20
            // setTimeout支持传入function和字符串，如果是字符串，会直接执行
            setTimeout(code)
        }

        function execCode3(code) {
            let a = 20
            // eval(code);
            let script = document.createElement('script');
            script.innerHTML = code;
            document.body.appendChild(script);
            document.body.removeChild(script);
        }
        function execCode4(code) {
            let a = 20
            // eval(code);
            // 直接将code作为函数体
            new Function(code)();
        }


        const code = "console.log('%cjs\动态执行js\index.html:22 a', 'color: #007acc;', a)"

        execCode(code)
        execCode2(code)
        execCode3(code)
        execCode4(code)
        console.log('执行完成')

    </script>
</body>

</html>